<script setup lang="ts">
import PointAndLine from './PointAndLine.vue'
import Legend from './Legend.vue'
import Header from './Header.vue'
const days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']
const redV = [43, 18, 25, 18, 46, 47, 25]
const blueV = [74, 59, 78, 64, 73, 87, 80]
</script>

<template>
  <div class="statistic-pro">
    <div class="container">
      <Header />
      <div class="graph">
        <Legend />
        <div class="graph-area">
          <div class="grid-line"></div>
          <PointAndLine color="red" :arr="redV" :days />
          <PointAndLine color="blue" :arr="blueV" :days />
        </div>
        <div class="days">
          <div class="mon">Mon</div>
          <div class="tue">Tue</div>
          <div class="wed">Wed</div>
          <div class="thu">hu</div>
          <div class="fri">Fri</div>
          <div class="sat">Sat</div>
          <div class="sun">Sun</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import './common.scss';
.statistic-pro {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgb(4, 119, 81);

  .container {
    margin: 0 auto;
    width: 500px;
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 2px 2px 10px #00000076;

    .graph {
      width: 100%;
      height: 320px;
      padding: 0 20px;
      background-color: white;
      .graph-area {
        width: 100%;
        height: 220px;
        position: relative;
        border-bottom: 1px solid #ddd;
      }

      .days {
        width: 100%;
        height: 36px;
        position: relative;

        & > div {
          position: absolute;
          font-size: 0.8rem;
          transform: translate(-50%, 30%);
          color: #454444;
        }
      }

      .grid-line {
        width: 100%;
        height: 0.8px;
        background: #ddd;
        position: relative;
        top: 50%;
      }
    }
  }
}
</style>
